<script>
import { pickTime } from '@/utils/pickTime'
export default {
  name: 'TestMachinePage',
  data() {
    const vList = []
    for (let id = 0; id < 1000; id++) {
      vList.push({
        id: `${id}`,
        value: `_${id}` // 长文本
      })
    }
    return {
      searchForm: {
        times: pickTime(7)
      },
      isShow: true,
      vList: vList,
      itemheight: 100,
      // 可视区域高度
      screenHeight: 0,
      // 起始索引
      start: 0,
      // 结束索引
      end: null,
      // 偏移量
      startOffset: 0

    }
  },
  computed: {
    // 列表总高度
    listHeight() {
      return this.itemheight * this.vList.length
    },
    // 可显示的列表项数
    visibleCount() {
      return Math.ceil(this.screenHeight / this.itemheight)
    },
    // 偏移量
    getTransform() {
      return `translate(0,${this.startOffset}px)`
    },
    // 获取真实显示列表数据
    visibleData() {
      return this.vList.slice(this.start, Math.min(this.end, this.vList.length))
    }
  },
  mounted() {
    this.screenHeight = this.$el.clientHeight
    this.start = 0
    this.end = this.start + this.visibleCount
  },
  methods: {
    testValue() {
      // const [startTime, endTime] = this.searchForm.times || []
      // console.log({ startTime, endTime })
      this.isShow = !this.isShow
    },
    scrollEvent() {
      // 当前滚动位置
      const scrollTop = this.$refs.list.scrollTop
      // 此时的开始索引
      this.start = Math.floor(scrollTop / this.itemheight)
      // 此时的结束索引
      this.end = this.start + this.visibleCount
      // 此时的偏移量
      this.startOffset = scrollTop - (scrollTop % this.itemheight)
    }
  },
  render: function(h) {
    // const searchTags = [
    //   { label: this.$t('keyword'), prop: 'name', tag: 'Dyndaterange', render: () => {
    //     return (
    //       <el-date-picker
    //         vModel={this.searchForm.times}
    //         type='daterange'
    //         placeholder={'请选择' }
    //         start-placeholder={this.$t('StartDate')}
    //         end-placeholder={this.$t('EndDate')}
    //         value-format={'yyyy-MM-dd HH:mm:ss'}
    //         format={'yyyy-MM-dd HH:mm:ss'}
    //         default-time={['00:00:00', '23:59:59']}>
    //       </el-date-picker>
    //     )
    //   } },
    //   { label: this.$t('customCode'), prop: 'customCode', tag: 'DynSelect' },
    //   { label: this.$t('modelName'), prop: 'eqpTypename', tag: 'DynInput' }
    // ]
    return (
      // <dynForm info-form={this.searchForm} search-tags={searchTags}>
      //   <el-button
      //     type='primary'
      //     icon='el-icon-search'
      //     size='small'
      //     vOn:click={this.testValue}
      //   >
      //     { this.$t('search') }</el-button>
      // </dynForm>
      <div>
        <h3>虚拟滚动</h3>
        <div class='infinite-list-container' on-scroll={this.scrollEvent} ref='list'>
          <div class='infinite-list-phantom' style={{ height: this.listHeight + 'px' }}></div>
          <div class='infinite-list' style={{ transform: this.getTransform }}>
            {this.visibleData.map((node, index) => {
              return (
                <div class='infinite-list-item' key={index}
                  style={{ height: this.itemheight + 'px', lineHeight: this.itemheight + 'px' }}
                >{node.value}</div>
              )
            })}
          </div>
        </div>
      </div>
    )
  }
}
</script>
<style lang='scss' scoped>
.infinite-list-container {
  width: 400px;
  height: 600px;
  margin: 0 auto;
  overflow: auto;
  position: relative;
  border: 1px solid #ccc;
  -webkit-overflow-scrolling: touch;
}

.infinite-list-phantom {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: -1;
}

.infinite-list {
  left: 0;
  right: 0;
  top: 0;
  position: absolute;
  text-align: center;
}
</style>
